<template>
  <div
    :class="[
      'safe-area',
      `safe-area--${position}`,
      {
        'safe-area--bg': showBackground
      }
    ]"
    :style="style"
  >
    <slot />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
  // 位置：top/bottom
  position: {
    type: String,
    default: 'bottom',
    validator: (value: string) => ['top', 'bottom'].includes(value)
  },
  // 是否显示背景色
  showBackground: {
    type: Boolean,
    default: true
  },
  // 背景色
  backgroundColor: {
    type: String,
    default: ''
  },
  // 是否多行内容
  multipleLine: {
    type: Boolean,
    default: false
  }
});

// 计算样式
const style = computed(() => ({
  backgroundColor: props.backgroundColor || 'var(--background-color-extra-light)'
}));
</script>

<style lang="scss" scoped>
.safe-area {
  width: 100%;
  
  &--top {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
  }
  
  &--bottom {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  &--bg {
    background-color: var(--background-color-extra-light);
  }
}
</style>

<script lang="ts">
export default {
  name: 'SafeArea'
};
</script>